<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>Vue 初始化入门学习</h2>
        <h3 class="text" v-once>{{msg}}</h3>
        <h4>{{text}} - {{a+b}}</h4>
        <h4 v-once>{{word}}</h4>
        <h4>{{message}}</h4>
        <div>
            <p>
                个数:<input type="text" v-model="total">
            </p>
            <p>
                单价:<input type="text" v-model="price">
            </p>
            <p>
                总价:{{price*total}}
            </p>
        </div>
        <img v-if="flag" v-bind:src="imgsrc" width="200" height="200" alt="">
        <div v-bind:data-title="word" data-id="id" v-bind:data-msg="msg">
            <a v-bind:href="href">点我百度一下</a>
        </div>
        <button v-on:click="changeFlag"> 点击隐藏图片 </button>
        <button v-on:click="changeSrc('../2.jpg')">点击修改图片链接 </button>
        <div>
            <p v-for="(item,index) in list">
                {{item}} -- {{index}}
            </p>
        </div>
        <h2>
            {{txt}}
        </h2>
        <h2 v-text="txt"> </h2>
        <div>
            {{tag}}
        </div>
        <div v-html="tag">
        </div>
    </div>


    <div id="mydemo">
        <hr>
        <h2>{{msg}}</h2>
        <h3>{{ word }}</h3>
        <h3>{{ text }}</h3>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app", //  document.querySelector(el)
        data: {
            a: 1,
            b: 200,
            msg: "wh2110 - daydayup",
            text: "wh2110- yYDS",
            word: "核心功能 允许采用简洁的模板语法来声明式地将数据渲染进DOM系统",
            message: "啥也不是",
            imgsrc: "../1.jpg",
            href: "http://www.baidu.com",
            flag: true,
            list: ["Vue", "React", "Angluar", "小程序"],
            total: 1,
            price: 104,
            txt: "2110 - 奋斗每一天",
            tag: "<h1>wh2110 - 少抽点烟 </h1>"

        },
        methods: {   // 接收Vue实例所有的方法 
            changeFlag() {
                this.flag = !this.flag
            },
            changeSrc(src) {
                this.imgsrc = src;
            },
            changeNum() {
                this.b += 100;
            }
        }
    })



    // 模仿实现Vue 数据绑定{{}}
    function MyVue(options) {
        this.options = options;
        this.el = options.el;
        this.data = options.data
        this.root = document.querySelectorAll(this.el)[0]

        this.init = function () {
            for (var key in this.data) {
                this[key] = this.data[key] // this.msg = this.data.msg 
                this.root.innerHTML = this.root.innerHTML.replace(new RegExp('{{' + ' {0,}' + key + ' {0,}' + '}}'), this[key])

                // {{msg}} =   wh2110 - daydayup   key 置换 value 
            }
        }
        this.init();

    }

    const myvm = new MyVue({
        el: "#mydemo",
        data: {
            msg: "wh2110 - daydayup",
            text: "wh2110- YYDS",
            word: "核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
        }
    })
</script>

</html>
<!-- API文档     (别人 封装好的Vue.js 代码  教你怎么使用 )
接口文档   
测试文档
需求文档
开发文档

开发环境  针对于  开发者  development 
测试环境  
生产环境  针对于  客户    production     
Freamwork  Vue =  React   +    Angular   
Vue===> view(发音)  侧重视图层   

Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
vm  得到的实例化对象  
el  属性  document.querySelector(el);   说明Vue的作用范围 
会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
data  Vue 需要初始化的数据  最常见的属性    
{{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
声明式  直接在 html  书写    a
编程式  直接在 javascript 书写  location.href 

响应式系统   reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)

强大的指令功能  v-   代替你进行DOM 操作  Attribute  
v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
静态属性  永远不改变 不是变量
动态属性  接收是变量  (v-bind)  70%
v-if/v-show  条件渲染  控制显示隐藏  90% 
v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
v-for   循环 循环对象 或数组   90%
v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
当你修改 页面的时候  v-model 自动去更新数据层 
当你修改 数据的时候  v-model 自动去更新视图层 

v-text   textContent   只接受文本
v-html   innerHTML     文本和html标签 
v-once   read-only 
methods vue 属性  接收方法 

组件化 组件系统是 Vue 的另一个重要概念 
允许我们使用小型、独立和通常可复用的组件构建大型应用 

封装 类似 Vue 实现数据的双向绑定  双大括号语法
-->